<template>
  <div class="drawer-box" :style="{
    width: unfold ? '100%' : '500px',
    // width: unfold ? '100%' : '600px',
  }">
    <div class="drawer-header">
      <div style="position: absolute; left: 20px;">
        <slot name="add" />
      </div>
      <div class="btns">
        <span :class="`btn-drawer-unfold ${unfold ? 'is-active' : ''}`" @click="handleChange(true)">
          开icon
        </span>
        <span :class="`btn-drawer-unfold ${!unfold ? 'is-active' : ''}`" @click="handleChange(false)">
          关icon
        </span>
      </div>
    </div>

    <div class="infinite-list">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      unfold: false,
    };
  },
  methods: {
    handleChange(val) {
      this.unfold = val
      this.$emit('unfold', val);
    }
  }
};
</script>

<style lang="less" scoped>
.drawer-box {
  height: 100%;
  position: absolute;
  // top: 70px;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(#fff, 1);
  box-shadow: 5px 0 10px rgba(#eee, 1);
  transition: all .5s;
  z-index: 99;

  .drawer-header {
    padding: 20px;
    display: flex;
    // justify-content: flex-end;
    // padding-left: 170px;
    padding-left: 370px;
    // padding-left: 470px;
    border-bottom: 1px solid #f4f4f4;

    .infinite-search {
      overflow: hidden;
      // width: 400px;
      width: 330px;

      .search {
        float: left;
        // width: 280px;
        width: 200px;
      }

      .add {
        float: left;
        width: 110px;
        box-sizing: border-box;
        padding-left: 18px;
        height: 36px;
        background: #7872F6;
        border-radius: 4px;
        margin-left: 10px;
        line-height: 36px;
        color: #FFF;

        &::before {
          margin-right: 4px;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }

    .btns {
      display: flex;
      border-radius: 4px;
      overflow: hidden;

      .btn-drawer-unfold {
        width: 40px;
        height: 20px;
        line-height: 20px;
        padding: 5px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background: #808080;
        cursor: pointer;
      }

      .is-active {
        background: rgba(#808080, .5) !important;
      }
    }
  }

  .infinite-list {
    height: 100%;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;

    .utils {
      display: flex;
      justify-content: space-between;
      padding-left: 20px;

      .all-check {
        display: flex;
        align-items: center;

        span {
          margin-left: 10px;
        }
      }
    }

    .infinite-item {
      padding: 10px 20px;
      border-bottom: 1px solid #eee;
      cursor: pointer;

      .title {
        font-size: 18px;
        line-height: 2em;
        font-weight: 700;
        color: #333;
      }

      .item {
        font-size: 12px;
        line-height: 2em;

        * {
          margin-right: 10px;
        }
      }

      .desc {
        color: #808080;
      }
    }

    .infinite-item.is-active {
      background: #eee;
      color: #fff;
    }

    .infinite-item.last-children {
      border: 0;
    }

    ::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #dcdcdc;
      border-radius: 8px;
      border: 2px solid #f5f5f5;
    }

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(#808080, .5);
      border-radius: 5px;
    }

    &::-webkit-scrollbar-thumb:hover {
      // background-color: #0056b3;
      background-color: #a4adcd;
    }

    &::-webkit-scrollbar-track {
      background-color: #f1f1f1;
      border-radius: 5px;
    }

    &::-webkit-scrollbar-corner {
      background-color: transparent;
    }
  }

  .drawer-box-table {
    height: 100%;
  }

  .el-table {
    padding: 20px 80px;
  }
}

.drawer-container {
  // border: 1px solid #f00;
}

.el-checkbox__input {
  .el-checkbox__inner {
    width: 15px;
    height: 15px;
    background: transparent;
    border-width: 2px;
    margin-top: 10px;
  }
}
</style>
